<!-- 分类列表页面 -->
<template>
    <div>
        <!-- <h4 style="margin-left: 10px;color: #d6a20f;">分类列表页面</h4> -->
        <a-card>
            <a-row :gutter="20">
                <!-- 搜索框 -->
                <!-- <a-col :span="6">
                    <a-input-search v-model="queryParam.name" placeholder="请输入分类名查找" enter-button allowClear
                        @search="getCateList" />
                </a-col> -->

                <!-- 添加按钮 -->
                <a-col :span="4">
                    <a-button type="primary" @click="addCate()">添加</a-button>
                </a-col>
            </a-row>

            <!-- 分类信息显示表格 -->
            <a-table
                :columns="columns"
                rowKey="id"
                :data-source="cateList"
                bordered
            >
                <!-- 操作按钮 -->
                <template slot="action" slot-scope="data">
                    <div class="actionSlot">
                        <a-button
                            type="primary"
                            icon="edit"
                            style="margin: 0 5px"
                            @click="editCate(data.id)"
                            >编辑
                        </a-button>
                        <a-button
                            type="danger"
                            icon="delete"
                            style="margin: 0 5px"
                            @click="deleteCate(data.id)"
                            >删除
                        </a-button>
                    </div>
                </template>
            </a-table>

            <!-- 新增分类区域 -->
            <a-modal
                closable
                title="新增分类"
                :visible="addCateVisible"
                @ok="addCateOk"
                @cancel="addCateCancel"
            >
                <a-form-model
                    :model="newCateInfo"
                    :rules="addCateRules"
                    ref="addCateRef"
                >
                    <a-form-model-item label="分类名" prop="name">
                        <a-input v-model="newCateInfo.name"></a-input>
                    </a-form-model-item>
                </a-form-model>
            </a-modal>

            <!-- 编辑分类区域 -->
            <a-modal
                closable
                title="编辑分类"
                :visible="editCateVisible"
                @ok="editCateOk"
                @cancel="editCateCancel"
            >
                <a-form-model
                    :model="cateInfo"
                    :rules="cateRules"
                    ref="editCateRef"
                >
                    <a-form-model-item label="分类名" prop="name">
                        <a-input v-model="cateInfo.name"></a-input>
                    </a-form-model-item>
                </a-form-model>
            </a-modal>
        </a-card>
    </div>
</template>

<script>
// 表格列配置
const columns = [
    {
        title: "ID",
        dataIndex: "id",
        width: "10%",
        key: "id",
        align: "center",
    },
    {
        title: "分类名",
        dataIndex: "name",
        width: "20%",
        key: "name",
        align: "center",
    },
    {
        title: "操作",
        width: "30%",
        key: "action",
        scopedSlots: { customRender: "action" },
        align: "center",
    },
];

export default {
    data() {
        return {
            // 分页配置
            pagination: {
                pageSizeOptions: ["5", "10", "20"],
                pageSize: 5,
                total: 0,
                showSizeChanger: true,
                showTotal: (total) => `共${total}条`,
            },
            // 分类列表数据
            cateList: [],
            // 表格列信息（不可少）
            columns,
            // 分页查询参数
            // queryParam: {
            //     name: '',  // 分类搜索文本
            //     pagesize: 5,
            //     pagenum: 1,
            // },
            visible: false,

            addCateVisible: false, //新增分类对话框是否显示
            editCateVisible: false, //编辑分类对话框是否显示
            //分类信息(新增分类使用)
            newCateInfo: {
                id: 0,
                name: "",
            },
            //分类信息（更新分类使用）
            cateInfo: {
                id: 0,
                name: "",
            },

            // 新增分类的表单验证
            addCateRules: {
                // 分类名校验规则
                name: [
                    {
                        required: true,
                        message: "请输入分类名",
                        trigger: "blur",
                    },
                    {
                        min: 2,
                        max: 50,
                        message: "分类名长度在2到50个字符之间",
                        trigger: "blur",
                    },
                ],
            },

            // 更新分类的表单验证
            cateRules: {
                // 分类名校验规则
                name: [
                    {
                        required: true,
                        message: "请输入分类名",
                        trigger: "blur",
                    },
                    {
                        min: 2,
                        max: 50,
                        message: "分类名长度在2到50个字符之间",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    //生命周期 - 创建完成（访问当前this实例）
    created() {
        this.getCateList();
    },
    //生命周期 - 挂载完成（访问DOM元素）
    mounted() {},
    //方法集
    methods: {
        // 获取分类列表
        async getCateList() {
            const { data: res } = await this.$axios.get("categories");
            if (res.code != 200) {
                return this.$message.error(res.msg);
            }
            this.cateList = res.data.data;
        },

        // 处理表格分页改变事件
        // handleTableChange(pagination, filters, sorter) {
        //     var pager = { ...this.pagination }
        //     pager.current = pagination.current;
        //     pager.pageSize = pagination.pageSize;
        //     this.queryParam.pagesize = pagination.pageSize;
        //     this.queryParam.pagenum = pagination.current;

        //     if (pagination.pageSize !== this.pagination.pageSize) {
        //         this.queryParam.pagenum = 1;
        //         pager.current = 1;
        //     }
        //     this.pagination = pager;
        //     this.getCateList();
        // },

        // 删除分类
        deleteCate(id) {
            this.$confirm({
                title: "提示：请再次确认",
                content: "确定删除此分类吗?一旦删除，不可恢复。",
                onOk: async () => {
                    const { data: res } = await this.$axios.delete(
                        `category/${id}`
                    );
                    // console.log(res);
                    if (res.code != 200) {
                        return this.$message.error(res.msg);
                    }
                    this.$message.success("删除成功");
                    this.getCateList();
                },
                onCancel: () => {
                    this.$message.info("操作已取消");
                },
            });
        },

        // 显示新增分类对话框
        addCate() {
            this.addCateVisible = true;
        },

        // 新增分类
        addCateOk() {
            this.$refs.addCateRef.validate(async (valid) => {
                if (!valid)
                    return this.$message.error("参数不符合要求请重新输入");
                const { data: res } = await this.$axios.post("category/add", {
                    name: this.newCateInfo.name,
                });
                console.log(res.code);
                if (res.code != 200) {
                    return this.$message.error(res.msg);
                }
                this.$refs.addCateRef.resetFields();
                this.addCateVisible = false;
                this.$message.success("新增分类成功");
                this.getCateList();
            });
        },

        // 取消新增分类
        addCateCancel() {
            this.$refs.addCateRef.resetFields();
            this.addCateVisible = false;
            this.$message.info("新增分类取消");
        },

        // 显示编辑分类对话框
        async editCate(id) {
            console.log(id);
            this.editCateVisible = true;
            const { data: res } = await this.$axios.get(`category/${id}`);
            this.cateInfo = res.data.data;
            this.cateInfo.id = id;
        },
        // 编辑分类确认
        editCateOk() {
            this.$refs.editCateRef.validate(async (valid) => {
                if (!valid)
                    return this.$message.error("参数不符合要求请重新输入");

                const { data: res } = await this.$axios.put(
                    `category/${this.cateInfo.id}`,
                    {
                        name: this.cateInfo.name,
                    }
                );
                if (res.code != 200) {
                    return this.$message.error(res.msg);
                }
                this.$refs.editCateRef.resetFields();
                this.editCateVisible = false;
                this.$message.success("编辑分类信息成功");
                this.getCateList();
            });
        },
        // 编辑分类取消
        editCateCancel() {
            this.$refs.editCateRef.resetFields();
            this.editCateVisible = false;
            this.$message.info("编辑取消");
        },
    },
};
</script>
<style scoped>
.actionSlot {
    display: flex;
    justify-content: center;
}
</style>